<template>
    <div class="chart-container">
      <div ref="chartRef" style="width: 100%; height: 400px;border: 1px solid #fff;background-image: linear-gradient(#4b4b4b, #323232);"></div>
    </div>
  </template>
  
  <script lang="ts">
import { defineComponent, onMounted, ref, Ref, PropType, watch } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'TimelineLineChart',
  props: {
    title: {
      type: String as PropType<string>,
      default: 'Default Title',  // 设置默认值
    },
    color: {
      type: String as PropType<string>,
      default: 'Default Title',  // 设置默认值
    },
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);  // 创建一个 ref 变量用于引用 DOM 元素
    const data = [
      ['3780.00', 40],
      ['3792.00', 96],
      ['3804.00', 59],
      ['3816.00', 50],
      ['3828.00', 39],
      ['3840.00', 70],
      ['3852.00', 51],
      ['3864.00', 117],
      ['3876.00', 46],
      ['3888.00', 98],
      ['3900.00', 56],
      ['3912.00', 56],
      ['3924.00', 52],
      ['3936.00', 58],
      ['3948.00', 49],
      ['3960.00', 118],
      ['3972.00', 112],
      ['3984.00', 42],
      ['3996.00', 43],
      ['4008.00', 37],
      ['4020.00', 53],
      // ['1040000', 98],
      // ['1050000', 56],
      // ['1060000', 56],
      // ['1070000', 52],
      // ['1080000', 58],
      // ['1090000', 49],
      // ['1100000', 118],
      // ['1110000', 112],
      // ['1120000', 42],
      // ['1130000', 43],
      // ['1140000', 37],
      // ['1150000', 53],
      // ['1160000', 12],
      // ['1170000', 127],
      // ['1180000', 62],
      // ['1190000', 23],
      // ['1200000', 59],
      // ['1210000', 118],
      // ['1220000', 60],
      // ['1230000', 116],
      // ['1240000', 19],
      // ['1250000', 33],
      // ['1260000', 20],
      // ['1270000', 20],
      // ['1280000', 125],
      // ['1290000', 41],
      // ['1300000', 106],
      // ['1310000', 34],
      // ['1320000', 106],
      // ['1330000', 130],
      // ['1340000', 86],
      // ['1350000', 104],
      // ['1360000', 91],
      // ['1370000', 32],
      // ['1380000', 13],
      // ['1390000', 117],
      // ['1400000', 59],
      // ['1410000', 81],
      // ['1420000', 35],
      // ['1430000', 17],
      // ['1440000', 41],
      // ['1450000', 25],
      // ['1460000', 103],
      // ['1470000', 98],
      // ['1480000', 116],
      // ['1490000', 83],
      // ['1500000', 32],
      // ['1510000', 37],
      // ['1520000', 71],
      // ['1530000', 113],
      // ['1540000', 64],
      // ['1550000', 24],
      // ['1560000', 88],
      // ['1570000', 14],
      // ['1580000', 119],
      // ['1590000', 103],
      // ['1600000', 85],
      // ['1610000', 10],
      // ['1620000', 94],
      // ['1630000', 125],
      // ['1640000', 123],
      // ['1650000', 51],
      // ['1660000', 40],
      // ['1670000', 68],
      // ['1680000', 43],
      // ['1690000', 80],
      // ['1700000', 100],
      // ['1710000', 129],
      // ['1720000', 89],
      // ['1730000', 80],
      // ['1740000', 66],
      // ['1750000', 63],
      // ['1760000', 54],
      // ['1770000', 46],
      // ['1780000', 39],
      // ['1790000', 10],
      // ['1800000', 37],
      // ['1810000', 22],
      // ['1820000', 75],
      // ['1830000', 11],
      // ['1840000', 115],
      // ['1850000', 35],
      // ['1860000', 56],
      // ['1870000', 23],
      // ['1880000', 61],
      // ['1890000', 91],
      // ['1900000', 115],
      // ['1910000', 102],
      // ['1920000', 115],
      // ['1930000', 54],
      // ['1940000', 71],
      // ['1950000', 72],
      // ['1960000', 91],
      // ['1970000', 118],
      // ['1980000', 18],
      // ['1990000', 22],
      // ['2000000', 56],
      // ['2010000', 97],
      // ['2020000', 48],
      // ['2030000', 74],
      // ['2040000', 55],
      // ['2050000', 53],
      // ['2060000', 78],
      // ['2070000', 26],
      // ['2080000', 88],
      // ['2090000', 115],
      // ['2100000', 115],
      // ['2110000', 51],
      // ['2120000', 97],
      // ['2130000', 23],
      // ['2140000', 54],
    ];
    const dateList = data.map(function (item) {
      return item[0];
    });
    const valueList = data.map(function (item) {
      return item[1];
    });
    onMounted(() => {
      if (chartRef.value) {
        const chart = echarts.init(chartRef.value);  // 初始化 ECharts 实例

        // 设置时间轴折线图的配置项
        const options: echarts.EChartsOption = {
          tooltip: {
            trigger: 'axis',
          },
          title: {
            text: props.title,  // 这里设置 Y 轴顶部的文字
            left: 100,
            top: 10,
            textStyle: {
              fontSize: 13,
              fontWeight: '',
              color: '#fff',  // 文字颜色
            },
          },
          // 图例
          // legend: {
          //   data: ['Data'],
          // },
          toolbox: {
            feature: {
              restore: {},
              saveAsImage: {},

            },
          },
          xAxis: {
            // type: 'time',
            // boundaryGap: false,
            // splitLine: {
            //   show: false,
            // },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#999"
              }
            },
            axisLabel:{
              interval:0
            },
            data: dateList,
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            // 背景横线
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: '#fff'
              }
            },
            //Y轴刻度线
            axisLine: {
              show: true,
              lineStyle: {
                color: "#999"
              }
            },
            // Y轴小刻度
            axisTick: {
              show: true
            }
          },
          // dataZoom: [
          //   {
          //     type: 'inside',
          //     start: 0,
          //     end: 10,
          //   },
          //   {
          //     start: 0,
          //     end: 10,
          //   },
          // ],
          series: [
            {
              name: 'Data',
              type: 'line',
              smooth: true,
              data: valueList,  // 生成数据
              lineStyle: {
                color: props.color // 设置折线颜色为红色  
              },
              itemStyle: {  
            color: props.color // 数据点颜色为绿色  
        }, 
            },
          ],
          // 轮播
          // timeline: {
          //   axisType: 'category',
          //   autoPlay: true,
          //   data: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01'],  // 时间轴数据
          //   playInterval: 2000,
          //   controlStyle: {
          //     showPrevBtn: true,
          //     showNextBtn: true,
          //   },
          //   checkpointStyle: {
          //     symbol: 'circle',
          //     symbolSize: 10,
          //     color: '#ff5c5c',
          //   },
          // },
        };

        chart.setOption(options);  // 将配置项设置到图表实例中

        // 监听窗口大小变化，调整图表大小
        window.addEventListener('resize', () => {
          chart.resize();
        });
      }
    });
    // 监听 props.title 的变化
    watch(() => props.title, (newTitle) => {
      if (chart.value) {
        chart.value.setOption({
          title: {
            text: newTitle,
          },
        });
      }
    });

    // 生成时间轴折线图的数据
    function generateData() {
      let base = +new Date(2022, 0, 1);
      const oneDay = 24 * 3600 * 1000;
      const data = [];
      for (let i = 0; i < 120; i++) {
        const now = new Date(base += oneDay);
        data.push({
          name: now.toLocaleDateString(),
          value: [now, Math.round(Math.random() * 100)],
        });
      }
      return data;
    }

    return {
      chartRef,
      dateList,
      valueList,
      generateData
    };
  },
});
  </script>
  
  <style scoped>
.chart-container {
  padding: 0 20px;
  margin-top: 10px;
}
</style>
  